<template>
  <div id="app">
      <router-view></router-view>
  </div>
</template>

<script>

    import Login from "@/views/Login";

    export default {
        name: "App",
        components: {
            Login,
        },
        data() {
            return {
                prizeList: [
                    {id: 1, prizeGrade: "特等奖", gift: "华为手机", number: 1},
                    {id: 2, prizeGrade: "一等奖", gift: "华为手表", number: 2},
                    {id: 3, prizeGrade: "二等奖", gift: "小米手环", number: 5},
                    {id: 4, prizeGrade: "三等奖", gift: "电动牙刷", number: 10},
                ],
            }
        },

        methods: {},

        mounted() {
            const jsonData = JSON.stringify(this.prizeList);
            localStorage.setItem('prizeList', jsonData);
        }
    }

</script>

<style scoped>
  #app {
    width: 1200px;
    height: 800px;
    background-color: rgb(248, 243, 222);
    margin: 0px auto;
    border-radius: 20px;
    border: 10px solid #f1ba7d;
    text-align: center;
    position: relative;
    background-image: url("./assets/bg.jpg");
    background-size: cover; /* 图片会被缩放并完全覆盖容器 */
    background-position: center; /* 图片在容器中居中显示 */
    background-repeat: no-repeat; /* 禁止图片重复 */
  }


  /* 导航 */
  .footer_wrap {
    position: relative;
    left: 0;
    top: 0;
    display: flex;
    width: 100%;
    text-align: center;
    background-color: #333;
    color: #ccc;
  }

  .footer_wrap a {
    flex: 1;
    text-decoration: none;
    padding: 20px 0;
    line-height: 20px;
    background-color: #333;
    color: #ccc;
    border: 1px solid black;
  }

  .footer_wrap a.router-link-active {
    background-color: purple;
  }

  .footer_wrap a:hover {
    background-color: #555;
  }
</style>